
import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class RegisterPage2 extends StatefulWidget {
  const RegisterPage2({Key? key}) : super(key: key);

  @override
  _RegisterPageState2 createState() => _RegisterPageState2();
}

class _RegisterPageState2 extends State<RegisterPage2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('肤质检测'),
        backgroundColor: Colors.purple,
        elevation: 0, // 移除阴影
      ),
      body: Column(children: [
        // 创建一个适当大小的间距，使正方形区域与标题栏保持一定距离
        SizedBox(height: 20),
        // 调整这个值来改变间距大小
        // 用户添加照片的正方形区域
        Container(
          width: MediaQuery
              .of(context)
              .size
              .width * 0.35, // 宽度为屏幕宽度的35%
          height: MediaQuery
              .of(context)
              .size
              .width * 0.35, // 高度与宽度相同
          decoration: BoxDecoration(
            border: Border.all(color: Colors.purple.withOpacity(0.5), width: 2),
            shape: BoxShape.rectangle,
          ),
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.add_a_photo,
                  size: 50,
                  color: Colors.purple,
                ),
                SizedBox(height: 10), // 图标和文本之间的间隔
                Text(
                  '添加照片',
                  style: TextStyle(
                    fontSize: 18,
                    color: Colors.purple,
                  ),
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 20),
        // 正方形区域与按钮之间的间隔
        // 两个按钮
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 上传图片逻辑
              },
              child: Text('上传图片'),
              style: ElevatedButton.styleFrom(
                primary: Colors.purple,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              ),
            ),
            SizedBox(width: 10), // 两个按钮之间的间隔
            ElevatedButton(
              onPressed: () {
                // 用户拍照逻辑
              },
              child: Text('用户拍照'),
              style: ElevatedButton.styleFrom(
                primary: Colors.purple,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
                padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              ),
            ),
          ],
        ),
        SizedBox(height: 10),
        // 调整这个值来改变按钮和文本之间的间距
        Text(
          '肤质数据报告',
          style: TextStyle(
            color: Colors.purple,
            fontWeight: FontWeight.bold,
            fontSize: 18, // 调整字体大小以适应您的界面
          ),
        ),
        Divider(
          height: 1, // 调整这个值来改变下划线的粗细
          color: Colors.purple, // 下划线的颜色
          indent: 0,
          endIndent: 0,
          thickness: 1, // 下划线的粗细
        ), SizedBox(height: 10),
        ExpansionTile(
          title: Text(
            '钱包明细',
            style: TextStyle(color: Colors.blueAccent),
          ),
          backgroundColor: Colors.purple[500], // 设置ExpansionTile背景为紫色
          children: <Widget>[
            Row(mainAxisAlignment: MainAxisAlignment.center, // 水平居中
                children: [
                  Container(
                    margin: EdgeInsets.only(right: 20),
                    // 右侧添加一些间距
                    width: MediaQuery
                        .of(context)
                        .size
                        .width * 0.35,
                    height: MediaQuery
                        .of(context)
                        .size
                        .width * 0.35,
                    decoration: BoxDecoration(
                      border: Border.all(
                          color: Colors.purple.withOpacity(0.5), width: 2),
                      shape: BoxShape.rectangle,
                    ),
                    child: PieChart(

                      PieChartData(
                        sections: [
                          PieChartSectionData(
                            value: 13,
                            color: Colors.blue,
                            title: '黑头',
                            titleStyle:
                            TextStyle(color: Colors.purple), // 设置标题字体为紫色
                          ),
                          PieChartSectionData(
                            value: 27,
                            color: Colors.green,
                            title: '痘印痘坑',
                            titleStyle:
                            TextStyle(color: Colors.purple), // 设置标题字体为紫色
                          ),
                          PieChartSectionData(
                            value: 40,
                            color: Colors.yellow,
                            title: '油脂',
                            titleStyle:
                            TextStyle(color: Colors.purple), // 设置标题字体为紫色
                          ),
                          PieChartSectionData(
                            value: 8,
                            color: Colors.orangeAccent,
                            title: '正常',
                            titleStyle:
                            TextStyle(color: Colors.purple), // 设置标题字体为紫色
                          ),
                          PieChartSectionData(
                            value: 8,
                            color: Colors.grey,
                            title: '螨虫',
                            titleStyle:
                            TextStyle(color: Colors.purple), // 设置标题字体为紫色
                          ),
                          PieChartSectionData(
                            value:6,
                            color: Colors.brown,
                            title: '伤疤',
                            titleStyle:
                            TextStyle(color: Colors.purple), // 设置标题字体为紫色
                          ),
                          // ... 添加更多饼图部分
                        ],
                      ),

                    ),


                  ),
                  Container(
                    width: MediaQuery
                        .of(context)
                        .size
                        .width * 0.35,
                    height: MediaQuery
                        .of(context)
                        .size
                        .width * 0.35,

                    child: LineChart(
                      LineChartData(
                        lineTouchData: LineTouchData(
                          enabled: true,
                          touchTooltipData: LineTouchTooltipData(
                            tooltipBgColor: Colors.grey[200],

                          ),
                        ),
                        gridData: FlGridData(
                          show: true,
                        ),
                        titlesData: FlTitlesData(
                          show: true,
                        ),
                        borderData: FlBorderData(
                          show: false,
                        ),
                        lineBarsData: [
                          LineChartBarData(
                            spots: [
                              FlSpot(1, 3),
                              FlSpot(2, 5),
                              FlSpot(3, 4),
                              FlSpot(4, 7),
                              FlSpot(5, 3),
                              // ... 根据您的数据源添加更多数据点
                            ],
                            isCurved: true,
                            colors: [Colors.blue],
                            barWidth: 2,
                            dotData: FlDotData(
                              show: true,
                            ),
                            belowBarData: BarAreaData(
                              show: false,
                            ),
                          ),
                          // 如果有需要，可以添加更多LineChartBarData以绘制多条线
                        ],
                      ),
                    ),


                  ),

                ]),
            SizedBox(height: 10), // 可选：添加一些间距
            Row(
              mainAxisAlignment: MainAxisAlignment.center, // 将Row的内容在父容器中居中
              children: [
                Text(
                  '         肤质问题分布',
                  style: TextStyle(color: Colors.purple), // 设置文本颜色为紫色
                  textAlign: TextAlign.center, // 设置文本在其容器内居中（在这个例子中可能不是必需的，因为Text本身就会占据整个Expanded空间）
                ),
                SizedBox(width: 60), // 设置两个文本之间的间距
                Text(
                  '             皮肤指数变化',
                  style: TextStyle(color: Colors.purple), // 设置文本颜色为紫色
                  textAlign: TextAlign.center, // 设置文本在其容器内居中（同样，在这个例子中可能不是必需的）
                ),
              ],
            ),
            Row(
              children: [
                Text('    肤质建议：  这是你的肤质建议，请注意保湿和防晒。',
                  style: TextStyle(
                    color: Colors.purple,
                    fontWeight: FontWeight.bold,
                    fontSize: 10, // 调整字体大小以适应您的界面
                  ),
                ),

              ],
            ),


          ],
        ),





      ]),
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: true, // 如果想要隐藏选中时的文字
        showUnselectedLabels: true, // 如果想要显示未选中时的文字
        type: BottomNavigationBarType.fixed,

        selectedItemColor: Colors.purple, // 选中项的颜色
        unselectedItemColor: Colors.grey, // 未选中项的颜色

        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '肤质检测',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.face),
            label: '我的',
          ),
        ],
      ),
    );
  }
}